[Update] Resizable Collapsable TitleWindow (RE-UPLOADED!)
I have come around the Post regarding SuperPanel and was kind of upset it wasn’t that what I have been searching for. Also the perfomance is a little sucky (never mind 😉 ) So I thought I have to do it better – this is what I made out of it
Check the demo here (Currently down, get the files here)
You can add new Windows by Pressing the button, it will react exactly as you would expect it from a windows window. Double clicking the header will expand/shrink the window. If you collapse it it will set down to the bottom of it’s container. Please let me know what you think of it and I will release the source code. As you might guessed you can also resize the window by dragging the right lower corner. Al l graphics are drawn via code but this can be easily changed. There are Methods to let it come up expanded or shrinked, an initial size and position and much more. I’ll post the sources this weekend, if there is need for it.
[Update]
The source view is available now, I don’t know why but it doesn’t work using the contextual menu – but who cares use this link:
Download and View it HERE
See the documentation HERE
Temporary only downloadable (no demo online), my webspace is down at the moment – but get it here at Depositfiles
Here are some more examples on those implementations, none of them met my requirements:
http://manish.revise.org/archives/2005/01/09/resizable-titlewindow-in-flex/
http://dev.jessewarden.com/flex/collapsablepanel/
(All down :-O )
And the best one I found, but with to much overhead:
http://www.flexdaddy.info/2005/03/06/resizable-and-collapsable-titlewindow-flex-15/
License
This component is licensed under the MIT license.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
in:flex Blog 
Hey this is great Alex! I love how you have it minimized to the bottom of the container. Very much like you see on the desktop. Will you be releasing your code? Or at least having view source enabled? Thanks for willing to share! Hopefully you’ll post more frequently on Flex. 🙂
Hi,
It looks great….i am trying for this since week, came across many components, if found this is very useful one, Can you please send me the source for the Resizable Collapsable TitleWindow.
Regards
Sriakanth
Hi,
I found one bug in this….closing the maximized window closes all other opened windows automaticcaly.
[Answer:]
Yes you are right, I will have to call the function to set the children visible again on close. They are not closed, they are just invisible 😉
Just add this line to the closeHandler function in CollapsableTitleWindow.as:
setParentsChildrenVisibility(true);
but be sure to call it before the removeChild is called.
This script would be near-perfect if the resizing could recognize minWidth and minHeight values…
Thanks for what you’ve done so far…
The position of the buttons and resize icon on the window break when I export as Flex 3.
Flex 3 changes the way the panel layout metrics is calculated, as clarified here:
Hey Alex,
The links to the source, demo and doc seems to be down? Will be great if we can try out your component. Been through everything else and this seems to be the most promising…. if only I could try it 😉 …
Can you repost the files, 404.
This is awesome. Thanks, kingschnulli. It works just fine for me in Flex 3. Except I don’t need the maximize button, so I haven’t tested that.
The only thing I tweaked was implementing a hitArea for the resizeButton, since clicking it was a little harder that I like.
For anyone interested, here’s what I did:
1. Add a protected var resizeHit:Sprite at the beginning.
2. In createChildren(), instantiate it with all the other sprites, and add titleBar.addChild(resizeHit) to the if(allowResize==true) block.
3. At the end of layoutChrome():
resizeHit.x = resizeButton.x;
resizeHit.y = resizeButton.y;
4. At the end of drawResizeButton():
resizeHit.graphics.beginFill(0xffffff, 0.0);
// the rect dimensions should perfectly match the resizeButton’s
resizeHit.graphics.drawRect(0,0,10,10);
resizeHit.mouseEnabled = false;
resizeButton.hitArea = resizeHit;
Done!
Well, I just realized that there’s an easier way around this. Ignore the last comment and the whole resizeHit:Sprite thing.
In drawResizeButton(), instead of this:
g.clear();
g.lineStyle(1, col);
g.moveTo(0,10);
g.lineTo(10,0);
g.moveTo(6,10);
g.lineTo(10,6);
g.moveTo(3,10);
g.lineTo(10,3);
g.lineStyle();
g.beginFill(0xFFFFFF, 0.01); // notable lines
g.drawRect(0,0,10,10);
Change to this:
g.clear();
g.beginFill(0xFFFFFF, 0.01); // notable lines
g.drawRect(0,0,10,10);
g.lineStyle(1, col);
g.moveTo(0,10);
g.lineTo(10,0);
g.moveTo(6,10);
g.lineTo(10,6);
g.moveTo(3,10);
g.lineTo(10,3);
Just the position of the “notable lines” made a difference. It’s interesting that having those lines at the end of the method works just fine for the Maximize and Collapse buttons, but not for Resize and Close.
Hi Alex
I have been trying to use your component in an application I am trying to create. The component works fine when the height and width are specified in pixels. If however the height and/or width is specified as a percentage of the parent the component does not render properly. Only the title bar shows up when the screen loads and the buttons are also misplaced.
Is there a way to fix the problem for the case when height and/or width need to be specified in percentage?
I do not think that there is an easy way to get it working with percentage sizes since the whole component relies on a fixed size. But i think that with a little modification it would work, feel free to add the things to the code you need.
Thanks for sharing your work!
Is there a reason you extend Panel and not TitleWindow?
And cheers to Alexandro, it was indeed a little bit choopy to catch the resizeButton, with your changes it works way better.
the resize sprite was indented in my flex and not located in the lower right corner (same goes for the header titlear buttons). If you have the same problem check layoutChrome() for
resizeButton.x = unscaledWidth – x – bm.right – 10;
make it:
resizeButton.x = unscaledWidth – resizeButton.width + 1;
Worked for me.
If you need the things from TitleWindow you can at any time change the inheritance – i do not think that there will be any problems with it.
Nice work…!
Thanks for sharing this wonderful stuff will any one can tell me how i can add a videoDisplay component on the window which is generated @ button click.
Plz help me out…
Thanks
If you want to add a video display that should be as easy as adding a canvas or anything else dynamically – use DisplayObject::addChild() (the window is a DisplayObject in it’s roots)
Hi,thanks for the codes..I want to ask,is it possible to extend it so when minimized,it will be on like windows system tray?Thanks..
This is not possible, if you want to have those extended desktop features you might want to go for AIR and make use of the NativeWindow Class of the AIR framework.
Ok..Thanks.Bye the way i’ve tested your code,when it’s minimized,it’s docked to the left bottom of the screen.Is it possible to extend the dock?Thanks..